import { defineStore } from "pinia";
import { computed, ref } from "vue";
import { watch } from 'vue'
import serialize from 'serialize-javascript';
import { destr } from "destr";
import arson from 'arson';
export const useBaseInfoStore = defineStore(
  "baseInfo",
  () => {


    const baseInfo = ref([
      {
        title: "基本信息",
        icon: "User",
        customList: [
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
          {
            key: 1,
            label: "姓名",
            value: "",
            placeholder1: "请输入字段名",
            placeholder2: "请输入字段值",
            type: "input",
            icon: "",
            draggable: true,
            isShow: true,
            isDelete: true,
          },
        ],
        materialList: [
          {
            label: "头像",
            url: "https://img0.baidu.com/it/u=4196045212,2369631059&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isShow: true,
            width: 120,
            height: 120,
          },
        ],
        baseInfoList: [
          {
            label: "姓名",
            value: "",
            placeholder: "请输入姓名",
            type: "input",
            icon: "",
            draggable: false,
            isShow: true,
            isDelete: false,
          },
          {
            label: "职位",
            value: "",
            placeholder: "请输入职位",
            type: "input",
            icon: "",
            draggable: false,
            isShow: true,
            isDelete: false,
          },
          {
            label: "状态",
            value: "",
            placeholder: "请输入状态",
            type: "input",
            icon: "Box",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "生日",
            value: "",
            placeholder: "请输入生日",
            type: "input",
            icon: "Timer",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "邮箱",
            value: "",
            placeholder: "请输入邮箱",
            type: "input",
            icon: "Message",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "电话",
            value: "",
            placeholder: "请输入电话",
            type: "input",
            icon: "Phone",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
          {
            label: "地址",
            value: "",
            placeholder: "请输入地址",
            type: "input",
            icon: "Location",
            draggable: true,
            isShow: true,
            isDelete: false,
          },
        ],
        showSetting: false,
        draggable: false,
        showItem: false,
        isDelete: false,
        active: true,
        component: "baseInfo",
      },
      {
        title: "工作经验",
        icon: "EditPen",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        active: false,
        isShow: true,
        itemList: [
          {
            isShow: true,
            isDelete: true,
            isExtend: false,
            draggable: true,
            itemInfo: {
              companyName: {
                label: "公司名称",
                value: "11111",
                required: true,
                placeholder: "输入公司名称",
              },
              companyAddress: {
                label: "公司地址",
                value: "",
              },
              workTime: {
                label: "工作时间",
                value: "",
              },
              //岗位
              workPost: {
                label: "岗位",
                value: "",
              },
              itemContent: {
                label: "工作内容",
                value: "",
              },
            },
          },
        ],
        component: "workExperience",
      },
      {
        title: "专业技能",
        icon: "Discount",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        active: false,
        component: "skills",
        value: "",
        isShow: true,
      },
      {
        title: "项目经历",
        icon: "List",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        isShow: true,
        active: false,
        component: "project",
        itemList: [
          {
            isShow: true,
            isDelete: true,
            isExtend: false,
            draggable: true,
            itemInfo: {
              projectName: {
                label: "项目名称",
                value: "1111",
              },
              projectRole: {
                label: "项目角色",
                value: "1111",
              },
              projectLink: {
                label: "项目链接",
                value: "1111",
              },
              projectTime: {
                label: "项目时间",
                value: "1111",
              },
              itemContent: {
                label: "项目描述",
                value: "1111",
              },
            },
          },
        ],
      },
      {
        title: "教育经历",
        icon: "School",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        isShow: true,
        active: false,
        component: "school",
        itemList: [
          {
            isShow: true,
            isDelete: true,
            isExtend: false,
            draggable: true,
            itemInfo: {
              //名称、专业、学历、gpa、开始时间、结束时间
              schoolName: {
                label: "学校名称",
                value: "1111",
              },
              schoolMajor: {
                label: "专业",
                value: "1111",
              },
              schoolDegree: {
                label: "学历",
                value: "1111",
              },
              schoolGpa: {
                label: "GPA",
                value: "1111",
              },
              schoolStartTime: {
                label: "开始时间",
                value: ''
              },
              schoolEndTime: {
                label: "结束时间",
                value: ''
              },
              itemContent: {
                label: "学习经历",
                value: "1111",
              },
            },
          },
        ],
      },
      {
        title: "个人简介",
        icon: "Star",
        showSetting: true,
        draggable: true,
        isDelete: false,
        showItem: true,
        isShow: true,
        active: false,
        component: "self",
        value: "",
      },
    ]);
    const workInfo = computed(() => baseInfo.value.find((item) => item.component === 'workExperience'));
    const skillsInfo = computed(() => baseInfo.value.find((item) => item.component === 'skills'))
    const projectInfo = computed(() => baseInfo.value.find((item) => item.component === 'project'))
    const schoolInfo = computed(() => baseInfo.value.find((item) => item.component === 'school'))
    const selfInfo = computed(() => baseInfo.value.find((item) => item.component === 'self'))
  


    return { baseInfo, workInfo, skillsInfo, projectInfo, schoolInfo, selfInfo };
  },
  {
    persist: {

      serializer: {

        serialize: arson.stringify,


        deserialize: arson.parse,
      },
    },
  }

);
